<template>
	<div class="modal-container">
		<teleport v-if="attrs.searchContainer" :to="attrs.searchContainer">
			<div class="search-container">
				<a-select class="select-house" v-model:value="home" label-in-value style="flex: 1; overflow: hidden" :filter-option="false" :not-found-content="fetching ? undefined : null" :options="data" @search="fetchData" show-search placeholder="请输入需要查找的房源地址" allow-clear @change="onSearch">
					<template v-if="fetching" #notFoundContent>
						<a-spin size="small" />
					</template>
				</a-select>
				<a-button type="primary" @click="onSearch">
					<template #icon>
						<SearchOutlined />
					</template>
				</a-button>
			</div>
		</teleport>
		<div class="modal-grid">
			<vxe-grid ref="grid" v-bind="gridOptions">
				<template #action="{row}">
					<a-button v-action="['mk_device']" type="primary" size="small" @click="handleOpenDetails(row)">查看</a-button>
				</template>
			</vxe-grid>
		</div>
		<renter-contract-detail-dialog :contract-id="contractDetailOptions.contractId" v-model:visible="contractDetailOptions.visible" />
	</div>
</template>

<script setup lang="ts">
	import {onUnmounted, reactive, ref, useAttrs} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {authExpiringList} from '@/api/device'
	import XEUtils from 'xe-utils'
	import {SearchOutlined} from '@ant-design/icons-vue'
	import {microApps} from '@/micros/apps'
	import RenterContractDetailDialog from '@/components/contract/contract-detail-dialog/index.vue'
	import houseApi from '@/api/house-api'
	import {SearchProps} from 'yuxin-base/src/types'

	const attrs = useAttrs()
	// 搜索配置
	const searchOption = reactive<SearchProps>({
		placeholder: '请输入需要查找的房源地址',
		// 搜索匹配类型
		matchTypes: [],
		// 搜索选项配置
		options: [],
		onSearch() {
			onSearch()
		}
	})
	const home = ref<any>(null)
	const fetching = ref(false)
	const data = ref([])

	const fetchData = XEUtils.debounce(async (value: string) => {
		data.value = []
		fetching.value = true
		const res = await houseApi.searchByAddress({like: value, size: 50, houseType: 0})
		data.value = res.data.records.map((v: any) => ({
			...v,
			value: v.houseBaseId,
			label: v.address
		}))
		fetching.value = false
	}, 300)

	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		align: 'center',
		height: 'auto',
		showOverflow: true,
		rowConfig: {isHover: true},
		columns: [
			{title: '姓名', width: 120, field: 'name'},
			{title: '手机号', width: 120, field: 'phone'},
			{title: '授权来源', width: 120, field: 'authSourceName'},
			{title: '房源地址', minWidth: 200, field: 'location'},
			{title: '授权编号', width: 100, field: 'paasId'},
			{title: '授权有效期', minWidth: 200, field: 'endTime'},
			{title: '剩余到期天数', width: 150, field: 'leftDays'},
			// {title: '操作', width: 150, field: 'control'}
			{
				title: '操作',
				align: 'center',
				width: 150,
				slots: {
					default: 'action'
				}
			}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return queryData({current, size, homeId: home.value?.value})
				}
			}
		}
	})

	const sceneMap: any = {
		1: '看房',
		2: '入住',
		3: '维修',
		4: '保洁',
		5: '配货',
		6: '其他',
		7: '新增同住人',
		8: '租户授权'
	}
	const authSourceMap: any = {
		1: '管理员密码',
		2: '合同入住',
		3: '设备',
		4: '同住人申请',
		5: '第三方'
	}

	async function queryData(query: any) {
		const res = await authExpiringList(query)
		res.data.records = res.data.records.map((data: any) => {
			return {
				...data,
				sceneName: sceneMap[data.scene],
				authSourceName: authSourceMap[data.authSource] || '-'
			}
		})
		return res
	}

	function onSearch() {
		grid.value.commitProxy('query')
	}

	const contractDetailOptions = reactive({
		visible: false,
		contractId: ''
	})
	const handleOpenDetails = row => {
		const {scene, deviceId, relateId} = row

		const showLockDetail = () => {
			microApps.loadApp({
				name: 'device',
				container: document.createElement('div'),
				props: {
					path: '/lock',
					query: {
						lockId: deviceId,
						searchContainer: false,
						newDate: new Date().getTime()
					}
				}
			})
		}
		const showContractDetail = () => {
			contractDetailOptions.visible = true
			contractDetailOptions.contractId = relateId
		}

		const handleShowDetail = scene === 2 ? showContractDetail : showLockDetail
		handleShowDetail()
		console.log(row, 'row')
	}

	onUnmounted(() => {
		microApps.removeApp('device')
	})
</script>

<style scoped>
	.modal-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.search-container {
		padding-bottom: 12px;
		display: flex;
	}

	.modal-grid {
		flex: 1;
		overflow: hidden;
	}

	.select-house {
		height: 32px;
	}
</style>
